<!DOCTYPE html>
<html>
<head>
	<title>实名认证 -- 快件e栈服务平台</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
	<link href="css/normalize.css" type="text/css" rel="stylesheet" />
	<link href="css/common.css" type="text/css" rel="stylesheet" />
	<script src="js/jquery.min.js" type="text/javascript"></script>
	<script src="js/common.js" type="text/javascript"></script>
	<script src="js/notice.js" type="text/javascript"></script>
	<script src="js/regexp.js" type="text/javascript"></script>
	<script src="js/jweixin-1.2.0.js" type="text/javascript"></script>
	<script src="layer/layer.js"></script>
	<style type="text/css">
		.content{
			overflow: hidden;
		}
		.userCheckCont{
			width: 100%;
		}
		.userInfoCont{
			overflow: hidden;
			padding: 40px 0px 20px;
			background-image: linear-gradient(to top,#1bb7c3,#f4f4f4);
			box-shadow: 0px 3px 3px #c1c1c1;
		}
		.userInfoCont  .userInfoIcon{
			width: 18%;
			margin: 0px auto 10px;
		}
		.userInfoCont  .nickName{
			font-size: 14px;
			text-align: center;
			font-weight: bold;
			color: #fff;
		}

		.solidCont{
			width: 200%;
			overflow: hidden;
		}
		.checkState{
			width: 50%;
			margin:30px 0;
			float: left;
		}
		.checkState .stateIcon{
			width: 30px;
			margin: 0 auto;
		}
		.checkState .checkStateTxt{
			text-align: center;
			font-size: 14px;
			padding: 5px 0;
			color: #333333;
			font-weight: bold;
			margin-bottom: 50px;
		}
		.checkState .checkBtn{
			width: 80%;
			line-height: 40px;
			margin: 5px auto;
			font-weight: bold;
			text-align: center;
			color: #20d6da;
			border: 2px solid #20d6da;
			border-radius: 20px;
		}
		.checkState .checkprompt{
			font-size: 14px;
			text-align: center;
			color: #888888;
			margin: 8px 0 0;
		}

		.infoCheckEditCont{
			width: 50%;
			float: left;
			padding-top: 20px;
			overflow:auto;
		}

		.submitBtn,.backBtn{
			width: 90%;
			margin: 0 auto 20px;
			text-align: center;
			line-height: 46px;
			border-radius: 23px;
			color: #20d6da;
			border: 2px solid #20d6da;
			font-weight: bolder;
		}

		/* userIdImg css */

		.userIdImgUpload .userIdImgCont img{
			width: 100%;
			display: block;
			margin: 0 auto;
		}


		.imageCover{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: rgba(0,0,0,0.8);
			display: none;
		}

	</style>
</head>
<body>
	<div class="content">
    
    <input id="timestamp" type="hidden" value="${timestamp}" />
	<input id="noncestr" type="hidden" value="${nonceStr}" />
	<input id="signature" type="hidden" value="${signature}" />
	<input id="appId" type="hidden" value="${appId}" />
	
	<div class="userCheckCont">
		<div class="userInfoCont">
			<div class="userInfoIcon">
				<img src="images/userInfoIcon.png" width="100%" alt="">
			</div>
			<div class="nickName">用户认证</div>
		</div>
	</div>
	
	<div class="solidCont">
		<div class="checkState">
			<div class="stateIcon">
				<img src="images/uncheckIcon.png" width="100%" alt="">
			</div>
			<div class="checkStateTxt">未认证</div>
			
			<!-- 按钮组 -->
			<div class="checkBtn userRegBtn">新用户认证</div>
			<div class="checkprompt">认证通过开启信息化校园快递</div>
		</div>

		<div class="infoCheckEditCont" id="newUserReg">
			<form>
				<input id="PageContext" type="hidden" value="${pageContext.request.contextPath}" />
				<input id="wxCode" type="hidden" value="${wxCode}" />
				<div class="userInputCont">
					<div class="inputTypeCont">
						<div class="inputTitle">姓名</div>
						<label for="name"></label><input type="text" id="name" class="commonInput" name="name" placeholder="请输入你的姓名...">
					</div>
					<div class="inputTypeCont">
						<div class="inputTitle">手机</div>
						<label for="phone"></label><input type="text" id="phone" class="commonInput" name="phone" placeholder="请输入你的手机号码...">
					</div>
					<div class="inputTypeCont">
						<div class="inputTitle">密码</div>
						<label for="password"></label><input type="text" id="password" class="commonInput" name="password" placeholder="请输入你的密码">
					</div>
					<div class="inputTypeCont">
						<div class="inputTitle">短信</div>
						<label for="code"></label><input type="text" id="code" class="verifiInput" name="msg" placeholder="请输入验证码...">
						<input type="button" class="verifiBtn" value="发送验证码" onclick="sendMessage1()" id="btnSendCode1">
					</div>
					
				</div>
			</form>
			<div id = "userRegSubmitBtn" class="submitBtn userRegSubmitBtn">确认提交</div>
			<div class="backBtn">点我返回</div>
		</div>
	</div>
	
	<div class="imageCover">
		<div class="coverCont">
			<img src="images/useridimage.jpg" width="501" alt="">
		</div>
	</div>
</div>

<script type="text/javascript">
	$(function() {
		const pageContextVal = $("#PageContext").val();
		const wxCodeVal = $("#wxCode").val();
		let windowW = $(window).width();
		const windowH = $(window).height();
		if (windowW > 600) {
			windowW = 600;
		}

		const topH = $(".userCheckCont").height();
		$(".solidCont").css({"height":(windowH - topH) + "px"});
		$(".infoCheckEditCont").css({"height":(windowH - topH - 30) + "px"});
		
		// cover
		var contentH = $(".content").height();
		$(".imageCover").css({"height":contentH + "px"});

		// 样例图片展示  501*377
		const imageH = windowW * 377 / 501;
		$(".coverCont").css({"margin-top":(windowH - imageH)/2 + "px"});

		$(".imageCover").click(function(){
			$(".imageCover").fadeOut();
		});
		
		$(".solidCont").css({"margin-left":0+"px"});

		$(".userRegBtn").click(function(){
			$(".solidCont").animate({"margin-left":-windowW+"px"},"fast");
		});

		$(".backBtn").click(function(){
			$(".solidCont").animate({"margin-left":0+"px"},"fast");
		});
	});
</script>
	<script>
		const phoneReg = /(^1[3|4|5|7|8]\d{9}$)|(^09\d{8}$)/;
		const count = 10;

		function sendMessage1() {
			curCount1 = count;
			const phone = $.trim($('#phone').val());
			if (!phoneReg.test(phone)) {
				alert(" 请输入有效的手机号码");
				return false;
			}
			$("#btnSendCode1").attr("disabled", "true");
			$("#btnSendCode1").val( + curCount1 + "秒再获取");
			InterValObj1 = window.setInterval(SetRemainTime1, 1000);
			//发送短信
			let load = layer.load();
			$.getJSON("/wx/loginSms.do",{userPhone:phone},function (data) {
				layer.close(load);
				layer.msg(data.result);
			});
		}
		function SetRemainTime1() {
			if (curCount1 === 0) {
				window.clearInterval(InterValObj1);
				$("#btnSendCode1").removeAttr("disabled");
				$("#btnSendCode1").val("重新发送");
			}
			else {
				curCount1--;
				$("#btnSendCode1").val( + curCount1 + "秒再获取");
			}
		}
		//获取原始用户信息
		$.getJSON("/wx/getUser.do",null,function (data) {
			if (data.status===0){
				layer.msg("请会员用户:'"+data.data.username+"'慎重修改信息！");
			}else {
				layer.msg(data.data.userPhone+"...为了你的便捷，请及时完善信息！");
			}
			$("#name").val(data.data.username);
			$("#phone").val(data.data.userPhone);
			$("#password").val(data.data.password);
		});
		$(function(){
			$(".submitBtn").click(function(){
				const windowId = layer.load();
				const phone = $.trim($('#phone').val());
				const code = $.trim($('#code').val());
				const username = $("#name").val();
				const password = $("#password").val();
				$.post("/wx/update.do",{
					newPhone:phone,
					code:code,
					newName:username,
					password:password
				},function (data) {
					layer.close(windowId);
					//用户验证成功
					if (data.status===1){
						//修改成功
						layer.msg(data.result);
					}else if (data.status===0){
						//修改失败
						layer.msg("修改失败，可能存在名字手机号重复！");
					}else {
						layer.msg(data.result);//验证失败提醒
					}
				},"JSON");
				return false;
			});
		});
	</script>
</body>
</html>